<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加职位</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <style>
        /* 设置页面的整体样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            margin: 0; /* 去除默认外边距 */
            display: flex;
            flex-direction: column; /* 设置为纵向布局 */
            height: 100vh; /* 设置高度为视口高度 */
            padding: 20px; /* 设置内边距 */
            background-color: #f5f5f5; /* 设置背景颜色 */
        }

        /* 设置标题的样式 */
        h1 {
            text-align: center; /* 居中对齐 */
            margin-bottom: 20px; /* 底部外边距为20px */
        }

        /* 设置表单容器的样式 */
        .form-container {
            width: 800px; /* 宽度为800px */
            margin: auto; /* 居中对齐 */
            background-color: white; /* 背景颜色为白色 */
            padding: 20px; /* 内边距为20px */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
            border-radius: 8px; /* 设置圆角 */
        }

        /* 设置表单组的样式 */
        .form-group {
            display: grid; /* 使用CSS Grid布局 */
            grid-template-columns: auto 1fr; /* 定义两列布局，第一列自动适应内容宽度，第二列占据剩余空间 */
            align-items: center; /* 垂直居中对齐 */
            margin-bottom: 15px; /* 底部外边距为15px */
        }

        /* 设置标签的样式 */
        .form-group label {
            margin-right: 10px; /* 右边距为10px */
            text-align: right; /* 标签文字右对齐 */
        }

        /* 设置职位名称和工作城市文本框的样式 */
        .form-group input {
            padding: 8px; /* 内边距为8px */
            box-sizing: border-box; /* 包括内边距和边框的宽度 */
            font-size: 14px; /* 字体大小为14px */
            width: 250px; /* 设置文本框的宽度 */
            height: 34px; /* 设置文本框的高度 */
        }

        /* 设置职位描述文本区域的样式 */
        .form-group textarea {
            padding: 8px; /* 内边距为8px */
            box-sizing: border-box; /* 包括内边距和边框的宽度 */
            font-size: 14px; /* 字体大小为14px */
            width: 576px; /* 设置文本区域的宽度 */
            height: 324px; /* 设置文本区域的高度为100px */
            resize: vertical; /* 允许垂直调整大小 */
        }

        /* 设置职位描述标签的垂直对齐方式 */
        .form-group.label-align-top label {
            align-self: start; /* 垂直顶部对齐 */
        }

        /* 设置按钮容器的样式，使按钮靠左对齐 */
        .button-container {
            display: flex;
            justify-content: flex-start; /* 水平靠左对齐 */
            margin-top: 20px; /* 上边距为20px */
        }

        /* 设置提交按钮的样式 */
        .submit-btn {
            padding: 10px 20px; /* 内边距为10px 20px */
            background-color: #4CAF50; /* 背景颜色为绿色 */
            color: white; /* 字体颜色为白色 */
            border: none; /* 无边框 */
            cursor: pointer; /* 鼠标悬停时显示为指针 */
            font-size: 16px; /* 字体大小为16px */
            border-radius: 4px; /* 设置圆角 */
            margin-left: 70px; /* 左边距为20px */
            width: 100px;
        }

        /* 设置提交按钮的悬停样式 */
        .submit-btn:hover {
            background-color: #45a049; /* 背景颜色变深 */
        }

        #text{
        width: 50%;
        height: 200px; /* 或其他所需高度 */
        resize: both; /* 允许用户调整大小 */
    }
    </style>
</head>
<body>
<div class="form-container" id="app" >

    <h1>新岗位招聘</h1>
    <!-- 职位名称输入框 -->
    <div class="form-group">
        <label for="pname">职位名称</label>
        <input type="text" id="pname" v-model="pname" placeholder="例：项目经理"> <!-- 使用v-model进行双向绑定 -->
    </div>
    <!-- 工作城市输入框 -->
    <div class="form-group">
        <label for="paddress">工作城市</label>
        <input type="text" id="paddress" v-model="paddress" placeholder="例：北京"> <!-- 使用v-model进行双向绑定 -->
    </div>
    <!-- 薪资范围输入框 -->

    <div class="form-group">
        <label for="salary">预期薪资</label>
        <input type="text" id="salary" v-model="salary" placeholder="例：5000" step="100">
    </div>

    <!-- 招聘人数输入框 -->
    <div class="form-group">
        <label for="enumber">招聘人数</label>
        <input type="text" id="enumber" v-model="enumber" placeholder="例：10">
    </div>

    <!-- 职位描述文本区域，添加label-align-top类使标签与文本框顶部对齐 -->
    
        <div class="form-group label-align-top">
            <label for="description">职位描述</label>
            <textarea class="text" v-model="fileContent"></textarea>
        </div>
   

    <!-- 按钮容器 -->
    <div class="button-container">
        <!-- 提交按钮 -->
        <button class="submit-btn" @click="submitJob">提交</button> <!-- 绑定点击事件 -->
    </div>
</div>
<!-- 导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 导入Axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    var CompanyInfo = JSON.parse(sessionStorage.getItem('userData'));

    // 创建Vue应用实例
    new Vue({
        el: '#app',
        data: {
            pname: '', // 职位名称
            paddress: '', // 工作城市
            salary:'', // 薪资范围
            enumber:'', // 招聘人数
            fileContent:''//文本
        },
        created() {
            // 获取用户信息

            // this.submitJob()
        },
        methods: {
            // 提交表单数据
            submitJob() {
                let data2 = new FormData();
                data2.append("cid",CompanyInfo.cid)
                data2.append("pname",this.pname)
                data2.append("paddress",this.paddress)
                data2.append("salary",this.salary)
                data2.append("enumber",this.enumber)
                data2.append("cv",this.fileContent)

                axios.post('http://localhost:8080/hqdx/position/InsertPosition', data2) // 向服务器发送POST请求
                    .then(response => {
                        console.log('Job added successfully:', response); // 处理成功的响应

                        if (response.data.data.message == '此岗位已存在') {
                            alert('此岗位已存在');
                        }else {
                            alert('职位添加成功'); // 提交成功后的提示
                            window.location.href = '公司端-首页.html'; // 提交成功后跳转回导航栏页面
                        }
                    })
                    .catch(error => {
                        alert('职位添加失败'); // 提交失败后的提示
                        console.error('Error adding job:', error); // 处理错误
                        window.location.href = '公司端-首页.html'; // 提交失败后跳转回首页
                    });
            }
        }
    });
</script>
</body>
</html>
